<template>
  <div id="App-Wrapper" :class="[appWrapperClass, theme]" :style="wrapperStyle">
    <!--max-w-10/12最大宽度为83.33%（10/12比例）, px-3 表示水平内边距为3*0.25rem, lg:max-w-screen-2xl 超过>=1024px的大屏幕宽度为2xl(1536px)*/-->
    <!--tabIndex="-1" 表示元素不可被选中-->
    <div id="App-Container"
         class="app-container max-w-10/12 lg:max-w-screen-2xl px-3 lg:px-8"
         @keydown.meta.k.stop.prevent=""
         tabindex="-1"
         :style="cssVariables"
    >
      <AppHeader />
      <div class="app-banner app-banner-image" :style="headerImage" />
      <div class="app-banner app-banner-screen" :style="headerBaseBackground" />
      <div class="relative z-10">
        <router-view v-slot="{ Component }">
          <transition name="fade-slide-y" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
  <AppFooter id="footer" :style="cssVariables" />
  <Navigator />
</template>


<script lang="ts">
import { defineComponent, computed, onBeforeMount, ref } from 'vue'
import { useAppStore } from '@/store/app'
import AppHeader from './components/Header/src/AppHeader.vue'
import AppFooter from '@/components/Footer.vue'
import Navigator from '@/components/Navigator.vue'
import api from '@/api/api'
import { useCommonStore } from '@/store/common'

export default defineComponent({
  name: 'App',
  components: {
    AppHeader,
    AppFooter,
    Navigator
  },
  setup() {
    const appStore = useAppStore()
    const commonStore = useCommonStore()
    const appWrapperClass = 'app-wrapper'

    const wrapperStyle = ref({ 'min-height': '100vh' })

    onBeforeMount(() => {
      initialApp()

    })

    const initialApp = () => {
      fetchWebsiteConfig()
      let wrapperHeight = screen.height
      const footEl = document.getElementById('footer')
      const footerHeight = footEl?.getBoundingClientRect().height
      if (typeof footerHeight === 'number') {
        wrapperHeight = wrapperHeight - footerHeight * 2
      }
      wrapperStyle.value = {
        'min-height': wrapperHeight + 'px'
      }
      appStore.initializeTheme(appStore.themeConfig.theme)
    }
    const fetchWebsiteConfig = () => {
      api.getWebsiteConfig().then(({ data }) => {
        appStore.websiteConfig = data.data.websiteConfigDTO
      })
    }

    const cssVariables = computed(() => {
      if (appStore.themeConfig.theme === 'dark-theme') {
        return `
          --text-accent: ${appStore.themeConfig.gradient.color1};      // text-accent用于设置文本的颜色
          --text-sub-accent: ${appStore.themeConfig.gradient.color3};  // text-sub-accent用于设置副文本的颜色
          --main-gradient: ${appStore.themeConfig.header_gradient};    // main-gradient用于设置导航栏的渐变颜色
        `
      }
      return `
        --text-accent: ${appStore.themeConfig.gradient.color3};
        --text-sub-accent: ${appStore.themeConfig.gradient.color2};
        --main-gradient: ${appStore.themeConfig.header_gradient};
      `
    })
    return {
      theme: computed(() => appStore.themeConfig.theme),
      cssVariables, appWrapperClass,
      wrapperStyle: computed(() => wrapperStyle.value),
      headerImage: computed(() => {
        return {
          backgroundImage: `url(${commonStore.headerImage}), url(${require('@/assets/default-cover.jpg')})`,
          opacity: commonStore.headerImage !== '' ? 1 : 0
        }
      }),
      headerBaseBackground: computed(() => {
        return {
          background: appStore.themeConfig.header_gradient,
          opacity: commonStore.headerImage !== '' ? 0.91 : 0.99
        }
      })
    }
  }
})
</script>
<style>
#app {
  /*
  @apply 允许将多个 Tailwind 类组合成一个自定义 CSS 类
  relative相对定位, min-w-full最小宽度100%, min-h-screen最小高度100vh, h-full高度100%
  */
  @apply relative min-w-full min-h-screen h-full;
  font-family: Avenir, Helvetica, Arial, sans-serif;

  .app-wrapper {
    /* bg-ob-dip-900 表示背景色为深色 */
    @apply bg-ob-deep-900 min-w-full h-full pb-12;
    /* 过渡效果 transform表示移动， border-radius表示圆角 */
    transition-property: transform, border-radius;
    transition-duration: 350ms;
    /* 缓动函数 ease表示平滑 */
    transition-timing-function: ease;
    /* transform-origin表示移动的起始点 0 42%表示从左侧开始移动 */
    transform-origin: 0 42%;

    .app-container {
      color: var(--text-normal);
      margin: 0 auto;
    }
  }
}
.app-banner {
  content: '';
  display: block;
  height: 600px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  /* clip-path表示裁剪形状，polygon表示多边形 */
  clip-path: polygon(
    100% 0,
    0 0,
    0 77.5%,
    1% 77.4%,
    2% 77.1%,
    3% 76.6%,
    4% 75.9%,
    5% 75.05%,
    6% 74.05%,
    7% 72.95%,
    8% 71.75%,
    9% 70.55%,
    10% 69.3%,
    11% 68.05%,
    12% 66.9%,
    13% 65.8%,
    14% 64.8%,
    15% 64%,
    16% 63.35%,
    17% 62.85%,
    18% 62.6%,
    19% 62.5%,
    20% 62.65%,
    21% 63%,
    22% 63.5%,
    23% 64.2%,
    24% 65.1%,
    25% 66.1%,
    26% 67.2%,
    27% 68.4%,
    28% 69.65%,
    29% 70.9%,
    30% 72.15%,
    31% 73.3%,
    32% 74.35%,
    33% 75.3%,
    34% 76.1%,
    35% 76.75%,
    36% 77.2%,
    37% 77.45%,
    38% 77.5%,
    39% 77.3%,
    40% 76.95%,
    41% 76.4%,
    42% 75.65%,
    43% 74.75%,
    44% 73.75%,
    45% 72.6%,
    46% 71.4%,
    47% 70.15%,
    48% 68.9%,
    49% 67.7%,
    50% 66.55%,
    51% 65.5%,
    52% 64.55%,
    53% 63.75%,
    54% 63.15%,
    55% 62.75%,
    56% 62.55%,
    57% 62.5%,
    58% 62.7%,
    59% 63.1%,
    60% 63.7%,
    61% 64.45%,
    62% 65.4%,
    63% 66.45%,
    64% 67.6%,
    65% 68.8%,
    66% 70.05%,
    67% 71.3%,
    68% 72.5%,
    69% 73.6%,
    70% 74.65%,
    71% 75.55%,
    72% 76.35%,
    73% 76.9%,
    74% 77.3%,
    75% 77.5%,
    76% 77.45%,
    77% 77.25%,
    78% 76.8%,
    79% 76.2%,
    80% 75.4%,
    81% 74.45%,
    82% 73.4%,
    83% 72.25%,
    84% 71.05%,
    85% 69.8%,
    86% 68.55%,
    87% 67.35%,
    88% 66.2%,
    89% 65.2%,
    90% 64.3%,
    91% 63.55%,
    92% 63%,
    93% 62.65%,
    94% 62.5%,
    95% 62.55%,
    96% 62.8%,
    97% 63.3%,
    98% 63.9%,
    99% 64.75%,
    100% 65.7%
  );
}
.app-banner-image {
  z-index: 1;
  background-size: cover;
  opacity: 0;
  transition: ease-in-out opacity 300ms;
}
.app-banner-screen {
  z-index: 2;
  opacity: 0.91;
  transition: ease-in-out opacity 300ms;
}
</style>